import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import {
  UserOutlined,
  FileTextOutlined,
  CommentOutlined,
  EyeOutlined,
  LikeOutlined,
  BellOutlined,
} from '@ant-design/icons';
import type { DashboardData } from '@/api/dashboard';

interface StatisticCardsProps {
  data: DashboardData;
}

const StatisticCards: React.FC<StatisticCardsProps> = ({ data }) => {
  const cards = [
    {
      title: '用户统计',
      items: [
        { title: '总用户数', value: data.totalUsers, icon: <UserOutlined /> },
        { title: '活跃用户', value: data.activeUsers, icon: <UserOutlined />, suffix: '/ 周' },
        { title: '今日新增', value: data.newUsersToday, icon: <UserOutlined /> },
        { title: '本月新增', value: data.newUsersThisMonth, icon: <UserOutlined /> },
      ],
    },
    {
      title: '文章统计',
      items: [
        { title: '总文章数', value: data.totalArticles, icon: <FileTextOutlined /> },
        { title: '已发布', value: data.publishedArticles, icon: <FileTextOutlined /> },
        { title: '草稿箱', value: data.draftArticles, icon: <FileTextOutlined /> },
        { title: '本月新增', value: data.newArticlesThisMonth, icon: <FileTextOutlined /> },
      ],
    },
    {
      title: '互动统计',
      items: [
        { title: '总访问量', value: data.totalViews, icon: <EyeOutlined /> },
        { title: '总点赞数', value: data.totalLikes, icon: <LikeOutlined /> },
        { title: '总评论数', value: data.totalComments, icon: <CommentOutlined /> },
        { title: '待审核评论', value: data.pendingComments, icon: <CommentOutlined /> },
      ],
    },
    {
      title: '系统统计',
      items: [
        { title: '总通知数', value: data.totalNotifications, icon: <BellOutlined /> },
        { title: '未读通知', value: data.unreadNotifications, icon: <BellOutlined /> },
        { title: '系统通知', value: data.systemNotifications, icon: <BellOutlined /> },
        { title: '今日评论', value: data.newCommentsToday, icon: <CommentOutlined /> },
      ],
    },
  ];

  return (
    <>
      {cards.map((section, index) => (
        <Card title={section.title} key={index} style={{ marginBottom: 16 }}>
          <Row gutter={[16, 16]}>
            {section.items.map((item, itemIndex) => (
              <Col xs={24} sm={12} md={6} key={itemIndex}>
                <Statistic
                  title={item.title}
                  value={item.value}
                  prefix={item.icon}
                  suffix={item.suffix}
                />
              </Col>
            ))}
          </Row>
        </Card>
      ))}
    </>
  );
};

export default StatisticCards; 